import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';
import Styles from '@/scss/rights.scss';
//引入表单组件
import Froms from '@/pages/components/rights/from/from_index/fromNew';
import CreateDone from '@/pages/components/rights/from/from_reveal/fromcreate';
import TitleRender from '@/pages/components/rights/list/list_nav/listnav';
import IsListRender from '@/pages/components/rights/list/islist';
import MyData from '@/pages/components/rights/mydata/mydata';
//引入自己封装的jwt工具类
import JWT from '@/utils/jwtutil';
//引入常量
import CONSTS from '@/inits/consts';
const LOGINDATA = CONSTS.LOGINDATA;
/* 右边部分入口组件 */
@inject('store')
@observer
class Rights extends Component<IStorePropsType, any> {
  //1、调用mobx的action修改显示与隐藏,以及当前组件状态
  showModal = () => {
    this.props.store.changeVisible(); //调用store 修改显示与隐藏方法
    this.props.store.handleshowRender(CONSTS.TODONULL); //调用store 传入todo进行表单渲染方法
  };
  //2、修改是否批量编辑状态  这在头部点击进入编辑状态时候使用
  handleBatchdel = () => {
    this.props.store.handleBatchdel(); //调用store 修改批量删除状态方法
  };
  //3、将待选列表移入回收站,并且修改状态
  clearBatchdels = () => {
    this.props.store.clearBatchdels(); //调用store 清空待选栏并且移入回收站方法
    this.props.store.handleBatchdel(); //调用store 修改批量删除状态方法
  };
  //4、清空待选状态与待选栏变量,但是不移入回收站
  clearBatchdelsNodel = () => {
    this.props.store.handleBatchdel(false); //调用store 修改批量删除状态方法(传入的是可选参数,将Batchdel赋值为false)
    this.props.store.clearBatchdelsNoDel(); //调用store 清空待选栏但不移入回收站方法
  };
  //①、传入TitleRender的函数,整合为对象传入利于理解
  TitleRenderMethods = {
    clearBatchdels: this.clearBatchdels,
    handleBatchdel: this.handleBatchdel,
    clearBatchdelsNodel: this.clearBatchdelsNodel,
  };

  render() {
    return (
      <div className={Styles.box}>
        {/* 一、进行隐藏表单的初始化渲染 此处调用表单组件 */}
        <div className={Styles.from}>
          {' '}
          {this.props.store.visible ? (
            <Froms todo={this.props.store.thistodo} store={this.props.store} />
          ) : (
            <div></div>
          )}{' '}
        </div>
        {/* 二、调用列表头部内容渲染组件   传入当前左边点击的即当前显示的页面  传入是否批量删除变量  传入清空批量移入回收站函数    */}
        {
          <TitleRender
            isShow={this.props.store.isShow}
            batchdel={this.props.store.batchdel}
            TitleRenderMethods={this.TitleRenderMethods}
          />
        }
        {/*三、 判断当为我的页面时，才渲染新建待办时间按钮 */}
        {this.props.store.isShow == CONSTS.ISSHOW.MY ? (
          <CreateDone store={this.props.store} showModal={this.showModal} />
        ) : (
          <div></div>
        )}
        {/* 四、调用列表判断渲染组件 传入显示隐藏表单函数以及mobx数据 */}
        {this.props.store.isShow != CONSTS.ISSHOW.DATA ? (
          <IsListRender store={this.props.store} showModal={this.showModal} />
        ) : (
          <MyData />
        )}
      </div>
    );
  }
}

export default Rights;
